<template>
  <div class="plan">
    <img class="plan-pic" src="@/assets/img/banner1.png" alt=""/>
    <div class="plan-warpper">
      <!-- 筛选 -->
      <div class="hot">
        <p class="title">热门领域 :</p>
        <ul class="option-list">
          <li v-for="(item,index) in hotField" :key="index">
            <span :class="item.active?'isActive':''" @click="handleConditionfilter(index,item.active,'hotField')">{{item.name}}</span>
          </li>
          <!-- <p v-if="isShow" @click="goMore">显示更多</p>
          <p v-else @click="goDown"> 收起</p> -->
        </ul>
      </div>
      <div class="hot">
        <p class="title">应用领域 :</p>
        <ul  class="option-list">
          <li v-for="(item,index) in  applyField" :key="index">
            <span :class="item.active?'isActive':''" @click="handleConditionfilter(index,item.active,'applyField')">{{item.name}}</span>
          </li>
        </ul>
        <div class="more-box">
          <p class="more" v-if="isShow" @click="goMore">更多</p>
          <p v-else @click="goDown"> 收起</p>
        </div>
      </div>
      <div class="hot">
        <p class="title">方案分类 :</p>
        <ul class="option-list">
          <li v-for="(item,index) in planSort" :key="index">
            <span :class="item.active?'isActive':''" @click="handleConditionfilter(index,item.active,'planSort')">{{item.name}}</span>
          </li>
        </ul>
      </div>
      <div class="hot">
        <p class="title">开发平台 :</p>
        <ul class="option-list">
          <li v-for="(item,index) in platform" :key="index">
            <span :class="item.active?'isActive':''" @click="handleConditionfilter(index,item.active,'platform')">{{item.name}}</span>
          </li>
        </ul>
        <div class="more-box">
          <p class="more" v-if="isplatShow" @click="goplatMore">更多</p>
          <p v-else @click="goplatDown"> 收起</p>
        </div>
      </div>
      <div class="condition">
        <ul class="condition-con">
          <li v-for="(item,index) in condition" :key="index" >
            <span :class="item.active?'isconActive':''" @click="filterCondition(index,item.active)">
              {{item.name}}
            </span>
          </li>
        </ul>
        <el-input
          placeholder="请输入方案"
          v-model="record.plan"
          suffix-icon="el-icon-search"
          class="search"
          clearable>
        </el-input>
      </div>
      <!-- 推荐方案 -->
      <div class="recommend-warpper">
        <p class="recommend-tit">推荐方案</p>
        <el-divider></el-divider>
        <div v-if="productList.length">
          <ul class="plan-box">
            <li class="plan-list" v-for="item in productList" :key="item.id" @click="goDetail(item.id)">
              <div class="picture">
                <img class="recommendpic" :src="item.goodsCover" alt=""/>
              </div>
              <div class="plan-sort">
                <!-- <p class="palnlevel">A级方案</p> -->
                <p class="planname">{{item.title}}</p>
              </div>
              <div class="planinfro">
                <p>{{item.cateName}}</p>
                <p class="number">
                  <img class="numicon" src="@/assets/img/icon.png" alt=""/>
                  {{item.viewNum}}
                </p>
              </div>
            </li>
          </ul>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="record.currentPage"
            :page-sizes="[12, 20,32, 40]"
            :page-size="record.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagetotal">
          </el-pagination>
        </div>
        <el-empty :image-size="200" v-else></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import {getPlanoption,getPlanlist} from "@/api/home.js";
export default {
  data() {
    return {
      hotField:[],
      applyField:[],
      planSort:[],
      platform:[],
      condition:[
        {
          id:40,
          character:'',
          name:'综合',
          active:true
        },
        {
          id:41,
          name:'发布时间',
          character:'created_at',
          active:false
        },
        {
          id:42,
          name:'人气',
          character:'view_num',
          active:false
        }
      ],
      pagetotal:0,
      record:{
        plan:'',
        filteHot:[],
        filteAppley:[],
        filteSort:[],
        filtePlatform:[],
        filterCon:'',
        pageSize:20,
        orderByType:'desc',
        currentPage:1,
      },//监听数据
      productList:[],//方案数据
      isShow:true,
      isplatShow:true,
      sliceList:[],
      sliceplatList:[],
    }
  },
  created(){
    getPlanoption().then(res=>{
      // console.log(res)
      if(res.code == 200){
        this.hotField = res.result[0].level2Options;
        this.applyField = res.result[1].level2Options;
        this.planSort = res.result[2].level2Options;
        this.platform = res.result[3].level2Options;
        // this.platform.map(item=>{
        //  item.name = item.name.slice(0,item.name.length - 1)
        // })
        this.hotField.map(item=>{
          this.$set(item,'active', false)
        })
        this.applyField.map(item=>{
          this.$set(item,'active', false)
        })
        this.planSort.map(item=>{
          this.$set(item,'active', false)
        })
        this.platform.map(item=>{
          this.$set(item,'active', false)
        })
        // console.log(this.hotField);
        // 条件数据
        let total = {name:'全部',active:true};
        let total1 = {name:'全部',active:true};
        let total2 = {name:'全部',active:true};
        let total3 = {name:'全部',active:true};
        this.hotField.unshift(total);
        this.applyField.unshift(total1);
        this.planSort.unshift(total2);
        this.platform.unshift(total3);
        if(this.applyField.length > 7){
          this.applyField.slice(6, this.applyField.length-1)
          this.sliceList=[...this.applyField.slice(7, this.applyField.length)]
          this.applyField=[...this.applyField.slice(0,7)]
        }
        if(this.platform.length > 7){
          this.platform.slice(6, this.platform.length-1)
          this.sliceplatList=[...this.platform.slice(7, this.platform.length)]
          this.platform=[...this.platform.slice(0,7)]
        }

      }
    })
  },
  methods:{
    handleSizeChange(size){
      this.record.pageSize = size;
    },
    handleCurrentChange(currentPage){
      this.record.currentPage = currentPage;
    },
    // 筛选事件
    handleConditionfilter(index, active, field){
      let tempArr = this[field];
      // console.log(tempArr);
      tempArr.forEach((item, arrIndex) => {
        if (index === arrIndex && !item.active) {
          item.active =  !active;
        }
        if(index !== arrIndex){
          item.active = false;
        }
      });
      this[field] = tempArr;
      this.hotField.map(item =>{
        if(item.active && item.name != '全部'){
          this.record.filteHot.push(item.name);
          // console.log(this.record.filteHot)
        }
      })
      this.applyField.map(item =>{
        if(item.active && item.name != '全部'){
          this.record.filteAppley.push(item.name);
        }
      })
      this.planSort.map(item =>{
        if(item.active && item.name != '全部'){
          this.record.filteSort.push(item.name);
        }
      })
      this.platform.map(item =>{
        if(item.active && item.name != '全部'){
          // item.name = item.name.concat(',')
          this.record.filtePlatform.push(item.name);
        }
      })
    },
    // 条件筛选
    filterCondition(index,active){
      // console.log(index,active);
      this.condition.forEach((item,arrIndex)=>{
        if(index === arrIndex && !item.active){
          item.active = !active;
        }
        if(index !== arrIndex){
          item.active = false;
        }
      });
       this.condition.map(item =>{
        if(item.active){
          this.record.filterCon = item.character;
        }
      })
    },
    // 监听事件
    handleFilter(val){
      let params = {
      'page': val.currentPage,
      'size': val.pageSize,
      'hotNames':val.filteHot,
      'cateNames':val.filteAppley,
      'typeDisplays':val.filteSort,
      'ideCateNames':val.filtePlatform,
      'orderByName':val.filterCon,
      'orderByType':val.orderByType,
      'keyWord':val.plan,
      }
      getPlanlist(params).then(res=>{
        if(res.code == 200){
          this.pagetotal = res.result.total;
          console.log(res.result.total,'总数');
          this.productList = res.result.list;
          console.log(this.productList,'总数');
        }else{
          this.$message.error('请重新操作');
        }
      })
      // console.log(val);
    },
    // 跳转路由
    goDetail(id){
      // console.log(id)
      this.$router.push({
        name:"planDetail",
        query:{
          id:id,
        }
      })
    },
    //应用 展示 收起
    goMore(){
      this.sliceList.map(item=>{
        this.applyField.push(item)
      })
      this.isShow=false
    },
    goDown(){
      console.log(this.applyField);
      this.applyField=[...this.applyField.slice(0,7)]
      this.isShow=true
    },
    //开发平台 展示 收起
    goplatMore(){
      this.sliceplatList.map(item=>{
        this.platform.push(item)
      })
      this.isplatShow=false
    },
    goplatDown(){
      console.log(this.platform);
      this.platform=[...this.platform.slice(0,7)]
      this.isplatShow=true
    },
  },
  watch:{
    record:{
      handler(val, oldval){
        console.log(val,'333333333');
        this.handleFilter(val)
      },
      deep:true,
      immediate:true
    }
  }
}
</script>

<style lang="less" scoped>
@import './../../../assets/style/edit.css';
.plan{
  width: 100%;
  background: #fff;
  .plan-pic{
    width: 100%;
    height: 240px;
  }
  .plan-warpper{
    width: 62.5%;
    background: #fff;
    // padding: 2% 7%;
    border-radius: 10px;
    margin:20px auto 0;
    font-size: 15px;
    .hot{
      cursor: pointer;
      display: flex;
      border-bottom: 1px solid #EEEEEE;
      .title{
        font-size: 14px;
        font-weight: 400;
        color: #191A24;
        // padding: 10px 0 10px 20px;
        line-height: 45px;
        min-width: 140px;
        background: #F6F6F6;
        text-align: center;
      }
      p{
        color: #333333;
        line-height: 40px;
        text-align: center;
      }
      .option-list{
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        padding-left: 12px;
        line-height: 40px;
        color: #666666;
      }
      .more-box{
        min-width: 36px;
        margin-right: 10px;
      }
      li{
        color: #606266;
        margin-right: 2%;
        // margin-bottom: 10px;
      }
    }
    .condition{
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      margin-top: 60px;
      .condition-con{
        display: flex;
        li{
          border: 1px solid #CCCCCC;
          border-right: none;
          height: 32px;
          width: 80px;
          font-size: 14px;
          line-height: 32px;
          text-align: center;
          &:last-child{
            border-right: 1px solid #CCCCCC;
          }
        }
      }
      
      .el-input{
        width: 30%;
      }
    }
    .recommend-warpper{
      margin-top: 30px;
      .recommend-tit{
        font-size: 16px;
        color: #E6A23C;
      }
      .el-divider--horizontal{
        margin: 10px 0;
        background-color: #E6A23C;
      }
      .plan-box{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .plan-list{
          width: 24%;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(124, 72, 117, 0.1);
          margin-right: 1.3%;
          margin-bottom: 20px;
          &:nth-child(4n){
            margin-right: 0;
          }
          &:hover{
            box-shadow: 0 0 10px 0 rgba(247, 37, 34,0.2);
            transition: all 0.3s;
          }
          .picture{
            // border-bottom: 1px solid #eee;
            margin-bottom: 5px;
          }
          .recommendpic{
            width: 100%;
            height: 207px;
            border-top-right-radius: 8px;
            border-top-left-radius:8px;
          }
          .plan-sort{
            width: 100%;
            padding: 8px 15px 10px;
            display: flex;
            font-weight: bold;
            .palnlevel{
              padding: 0 5px;
              font-size: 14px;
              border-radius: 5px;
              text-align: center;
              color: #fff;
              background:#ff4e00 ;
              margin-right: 3%;
              font-weight: 400;
              min-width: 60px;
              height: 22px;
              line-height: 20px;
              box-sizing: border-box;
            }
            .planname{
              width: 75%;
              font-size: 14px;
              font-weight: 600;
              color: #333333;
              line-height: 20px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .planinfro{
            padding: 5px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #999999;
            .number{
              display: flex;
            }
            .numicon{
              width: 20px;
              height: 20px;
              display: inline-block;
              margin-right: 3px;
            }
          }
        }
      }
      .el-pagination{
        padding: 20px 5px;
        text-align: right;
      }
    }
  }
  .isActive{
    color: #4370F3;
  }
  .isconActive{
    color: #fff;
    font-weight: 600;
    display: block;
    border-color: #4370F3;
    background: #4370F3;
  }
}

</style>